<template>
  <div class="swiperWrapper">
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="(item) in swiperList" :key="item.id">
          <a href="#">
              <img @load = "imgload" :src="item.picUrl" alt="">
          </a>
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
export default {
    props:["swiperList"],
    data(){
        return {
            // swiperHeight:0
        }
    },
    methods:{
        imgload(e) {
            // if(this.swiperHeight) return
            //  this.swiperHeight = e.target.clientHeight
        }
    }
};
</script>

<style scoped lang="stylus">
.swiperWrapper
   height 150px
   >>>.mint-swipe
         .mint-swipe-items-wrap
             .mint-swipe-item
                a
                 img 
                   width 100%
         .mint-swipe-indicator 
            opacity 0.5
            &.is-active
                width: 20px;
                border-radius: 5px;
                background: hsla(0,0%,100%,.8);

</style>